NaN

html5新增标签

(1) 语义化结构标签

最常用语义标签

  1. header 头部标签
  2. footer 底部标签
  3. nav 导航标签
  4. aside 侧边栏
  5. main 主体
<!DOCTYPE html>
<html lang="en">  
<body> 
  <header>
      头部
  </header>

  <!-- 导航栏 -->
  <nav>
      <a href="">1</a>
      <a href="">1</a>
      <a href="">1</a>
  </nav>

  <aside>
      侧边栏
  </aside> 

  <main>
      主体部分
  </main>

  <footer>
      底部
  </footer>
</body> 
</html>

其他语义化标签 (了解)

<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

(2) 多媒体标签 

<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

audio 和 video 标签

<!DOCTYPE html>
<html lang="en"> 
<body>
    <audio src="https://www.w3school.com.cn/i/horse.ogg" controls></audio>
</body> 
</html>

<!DOCTYPE HTML>
<html>
<body>
    <video autoplay src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
    your browser does not support the video tag
    </video>
</body>
</html>

(3) 新的 Input 类型

  1. number
  2. tel
  3. date
  4. color
  5. datetime
  6. datetime-local
  7. email
  8. month
  9. range
  10. search
  11. time
  12. url
  13. week
<!-- number, tel, date -->
<!DOCTYPE HTML>
<html>
<body>
    <input type="number">
    <input type="tel">
    <input type="date">
</body>
</html>

(4) canvas画布

先了解一下

<!DOCTYPE html>
<html> 
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>

    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "30px Arial";
        ctx.strokeText("Hello World", 10, 50);
    </script>

</body> 
</html>